<template>
  <div>
    <el-alert type="info" show-icon :closable="false">
      <div slot="title">数据一共{{ counts }}条</div>
    </el-alert>
    <!-- 表格 -->
    <el-table :data="tableList" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
      <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template slot-scope="scope">
          {{ ti[scope.row.questionType] }}
        </template>
      </el-table-column>
      <el-table-column label="题干" width="280">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
        <template slot-scope="scope">
          {{ Time(scope.row.addDate) }}
        </template>
      </el-table-column>
      <el-table-column label="难度" width="80">
        <template slot-scope="scope">
          {{ nan[scope.row.difficulty] }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120"> </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template slot-scope="scope">
          {{ shen[scope.row.chkState] }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150"> </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120"> </el-table-column>
      <el-table-column label="发布状态" width="150">
        <template slot-scope="scope">
          {{ scope.row.publishState === 0 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template class="btns" slot-scope="scope">
          <el-button type="text" size="small" @click="showPreview(scope.row)">预览</el-button>
          <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true" @click="shenhe(scope.row)">审核</el-button>
          <el-button type="text" size="small" :disabled="scope.row.publishState ===1 ? true : false" @click="$router.push({ path: '/questions/new', query: { id: scope.row.id },})">修改</el-button>
          <el-button type="text" size="small" @click="EditGublishState(scope.row)" >{{scope.row.publishState === 0 ? '下架' : '上架' }}</el-button>
          <el-button type="text" size="small" @click="EditRander(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 预览弹出层 -->
    <el-dialog title="提示" :visible.sync="previewDialogVisible" width="60%" v-if="previewDialogVisible">
      <questions-preview :TableID="TableItemData" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 审核通过对话框 -->
    <el-dialog title="题目审核" :visible.sync="checkDialogVisible" v-if="checkDialogVisible" width="26%">
      <questionsCheck :check="check" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="checkDialogVisible = false">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import { choicePublish, remove} from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview'
import questionsCheck from '../components/questions-check'
export default {
  name: 'choiceTabeitem',
  data() {
    return {
      nan: ['简单', '一般', '困难'],
      ti: ['单选', '多选', '简答'],
      shen: ['待审核', '通过', '拒绝'],
      previewDialogVisible: false,
      checkDialogVisible: false,
      TableItemData: null, //预览传值
      check: null // 审核传值
    }
  },
  props: {
    subjectsList: {
      type: Array,
      required: true
    },
    tableList: {
      type: Array,
      required: true
    },
    counts: {
      type: Number,
      required: true
    }
  },
  components: {
    questionsPreview,
    questionsCheck
  },
  computed: {
    // subjectsLiss() {
    //   // return this.subjectsList.unshift('')
    // }
  },
  methods: {
    Time(time) {
      // 格式化时间
      return parseTime(time)
    },
    showPreview(data) {
      this.previewDialogVisible = true
      this.TableItemData = data.id
    },
    shenhe(data) {
      this.checkDialogVisible = true
      this.check = data
      console.log(data)
    },
    async EditGublishState(data) {// 上架/下架
      const dataa = await this.$confirm('你确认'+ `${data.publishState== 0 ? '下架':'上架'}` +'这道题目吗, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(res => res)
      if (dataa === 'cancel') return
      console.log(data)
      const {datas} = await choicePublish(data)
      console.log(datas)
      this.$emit('editDel')
    },
    EditRander (data) {// 删除
      this.$confirm('此操作将永久删除用户'+',是否继续？','提示',{
        type: 'warning'
      })
      .then( async () => {
        await remove(data)
        .then(response => {
          this.$message.success('成功删除了用户!')
          this.$emit('editDel')
        })
        .catch(response => {
          this.$message.error('删除失败')
        })
      })
      .catch(() => {
        this.$message.info('已取消操作')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btns {
  display: flex;
  justify-content: space-evenly;
}
::v-deep .el-table-column {
  text-align: center;
}
</style
